import React,{ Component } from 'react'
import HomeCommon from 'pages/home/HomeCommon'
import { Icon } from 'antd-mobile';

import {
    BigShop,
    CartNoGoods,
    Opps,
    EmptyCar,
    GoStroll,
    ShopContainer,
    ShopItem,
    ShopItemTop,
    ShopItemMid,
    ShopItemBot,ShopCarButtom,
    DetailCountContainerStyle
} from './ShopStyle'

import BScroll from 'better-scroll'
const Item=(props)=>{
    return (
        <ShopItem>
        <ShopItemTop>
            <Icon  type="check-circle" size='xs' color={props.colorFlag&&'#fe4070'||'#eee'} /><span>盈通商务发货</span>
        </ShopItemTop>
        <ShopItemMid>
            <Icon  type="check-circle" size='xs' color={props.colorFlag&&'#fe4070'||'#eee'} />
            <div className="item-content">
                <div className="item-left">
                    <img src={props.shop_img}/>
                </div>
                <div className="item-right">
                    <h2>
                        <em>[极速免税]</em>
                        <span>{ props.shop_name}</span>
                    </h2>
                    <h3>
                       
                        <span className="num">x{props.shop_num}</span>
                        {
                        !props.shopEditFlag &&
                        <DetailCountContainerStyle>
                        购买数量 <button onClick={()=>{props.minus(props.index)}}><i className="fa fa-minus"></i></button>
                            <span>{ props.shop_num }</span>
                            <button onClick={ ()=>{props.plus(props.index)} }><i className="fa fa-plus"></i></button>
                        </DetailCountContainerStyle>
                    }
                    </h3>
                    <h4>
                        <span className="price">￥{props.shop_price}</span>
                        { props.shopEditFlag &&<span 
                        className="edit"
                        onClick={ () => { props.edit(props.index) }}
                        >编辑</span>}
                        {
                         !props.shopEditFlag &&
                        <div>
                            <span
                            onClick={ () => { props.delete(props.index,props._id)} }
                            >  删除 |  </span>
                            <span 
                            onClick={ () =>{props.commit(props.index,props._id)}}
                            >完成</span>
                        </div>
                        }
                    </h4>
                </div>
            </div>
        </ShopItemMid>
        <ShopItemBot>
            <div className="logo">免</div>
            <span>已享指定商品包邮</span>
        </ShopItemBot>
    </ShopItem>
    )
}
class Shop extends Component{
    constructor(){
        super()
        this.state={
            colorFlag:true,
            shopFlag:true,
            shopLists:null,
           
            

        }
    }
    plus = (index) => {
        
      this.state.shopLists[index].shop_num +=1
      this.setState({
          shopLists:this.state.shopLists
      })
        
    }

    minus = (index) => {
        if( this.state.shopLists[index].shop_num>1 ){

            this.state.shopLists[index].shop_num -=1
            this.setState({
                shopLists:this.state.shopLists
            })
            
        }
    }

    edit = (index) => {
        this.state.shopLists[index].shopEditFlag = false
        this.setState({
            shopLists:this.state.shopLists
        })
       
    }

    commit = (index,_id) => {
        this.state.shopLists[index].shopEditFlag = true
        this.setState({
            shopLists:this.state.shopLists
        })
        this.props.editShopCarLists(this.state.shopLists[index])
    }

    delete = (index,_id) => {

        this.state.shopLists.splice( index,1 )
        this.setState({
            shopLists:this.state.shopLists
        })
        this.props.deleteShopCarLists(_id)

    }
   

    changeColor=()=>{
        this.setState({
            colorFlag:!this.state.colorFlag
        })
    }
    go = () => {
        this.props.history.push('/home/index/now')
    }

    renderItem = () => {
        return   this.state.shopLists && this.state.shopLists.map( (item,index) => {
            return  (<Item 
                {...this.state} {...item} key={item._id} 
                minus ={this.minus}
                plus = {this.plus }
                edit = {this.edit}
                index= {index}
                commit = {this.commit}
                delete = {this.delete}
                />)
        }) 
    }

    shopTotal = () => {
        let total = 0
         this.state.shopLists && this.state.shopLists.map( item => {
            total += item.shop_price * item.shop_num
        })
        return total.toFixed(2)
    }
    componentDidMount () {
        this.props.change_title('购物车')
        this.props.getShopCarLists()
        

    }

    componentWillReceiveProps ( nextProps ) {
        if(  nextProps.shop_car_lists !== null){
            if( nextProps.shop_car_lists[0] !==undefined){
                this.setState({
                    shopFlag:false
                })
                this.state.shopLists = nextProps.shop_car_lists
                this.state.shopLists.map( item => {
                    return item.shopEditFlag = true
                })
                new BScroll( this.shop,{
                    click:true,
                    mouseWheel: {
                        speed: 5,
                        invert: false,
                        easeTime: 300
                       },
                       pullUpLoad: {
                        threshold: 50 //开启上拉事件
                    },
                })
                
            }else{
            
                this.setState({
                    shopFlag:true
                })
            }
        }
       
    }
    
    render () {
        return(
          <BigShop>
             
                {this.state.shopFlag&& (<CartNoGoods className="cart-no-goods">
                    <Opps className="opps"></Opps>
                    <EmptyCar className="empty-cart">您的购物车中没有商品，请先去挑选心爱的商品吧！</EmptyCar>
                    <GoStroll className="go-stroll" onClick={ this.go}>去逛逛</GoStroll>
                </CartNoGoods>)  }
               
                <ShopContainer>

                <div className="lists" ref = { el => this.shop = el}>
                    <div>
                   {this.renderItem()}
                  
                   </div>
                </div>
                   
                   
                   { !this.state.shopFlag && (<ShopCarButtom>
                      <div>
                        <p>
                            <Icon onClick={this.changeColor} type="check-circle" size='xs' color={this.state.colorFlag&&'#fe4070'||'#eee'} />
                        <span className="allCheck">全选</span>
                        <span className="sum">合计</span>
                        <span className="allprice">￥{
                            this.shopTotal()
                            }</span> 
                        </p> 
                        <button>去结算({this.state.shopLists && this.state.shopLists.length})</button>
                      </div>
                 
                    </ShopCarButtom>)}
                
                </ShopContainer>
                
            </BigShop>
                
        )
    }
}

export default HomeCommon(Shop);



